<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="base">

<head>
	<meta charset="UTF-8" />
	<title th:text="#{iotxMgr}">iotx管理</title>

	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jquery-UI/jquery-ui-1.12.1.custom/jquery-ui.theme.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/jqgrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="/webResources/plugins/pageJquery/css/zxf_page.css"/>
	<link href="/webResources/plugins/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

	<style>
		.anchorBL{
	        display:none;
	    }
        .ui-jqgrid-htable{
            height: 40px;font-size: 14px;color: #80909c;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable th div {
            overflow: hidden;
            position: relative;
            height: 40px;
            padding-top: 10px;color: #798692;font-weight: 500;
        }
        .ui-jqgrid .ui-jqgrid-htable .ui-th-div {
		    height: 40px;
		    margin-top: 5px;
		    display: inine-block;
		}
        .ui-jqgrid .ui-jqgrid-resize {
            height: 40px !important;
            position: relative;
            cursor: e-resize;
            display: inline;
            overflow: hidden;
        }
        .ui-jqgrid tr.jqgrow {
            outline-style: none;
            height: 40px;
        }
        .ui-jqgrid tr.ui-row-ltr td {
            text-align: left;
            border-right-width: 0px;
            border-right-color: inherit;
            border-right-style: solid;
            color: #333333;
            font-size: 14px;
        }
        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
            border: 0px solid #fcd3a1;
            background: #fbf8ee;
            color: #444;
        }
        .ui-widget-content {
            border: 1px solid #eee;
            background: #fff;
        }
        .ui-jqgrid tr:nth-child(even) {
            background: #F4F8F9;
        }
        .ui-jqgrid tr:nth-child(odd) {
            background: #FFFFFF;
        }
        .table-tr{
            height: 5px;
        }
    </style>

	<script type="text/javascript" th:src="@{http://api.map.baidu.com/getscript(v=2.0,ak=5CszUV7dPeeTfhUi2OR8hXncqKYz2WqW,t=20170608143204)}"></script>
	<script type="text/javascript" src="/webResources/plugins/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/bMap/bmap.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/map/commonMap.js" ></script>
	<script type="text/javascript" src="/webResources/plugins/datetimepicker/bootstrap-datetimepicker.min.js" ></script>
	<script type="text/javascript" src="/webResources/plugins/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js" ></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jqgrid/src/i18n/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/webResources/plugins/pageJquery/js/zxf_page.js" ></script>
	<script type="text/javascript" src="/webResources/js/custom/page/createPage.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/iotx/iotxManagementTable.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/iotx/iotxManagementMap.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/iotx/iotxDistributePie.js"></script>
	<script type="text/javascript" src="/webResources/js/custom/iotx/iotxAlarmData.js"></script>
	<script type="text/javascript" src="/webResources/plugins/jquery-BlockUI/jquery.blockUI.js" ></script>

</head>

<body>
	<div layout:fragment="content" >
		<div class="table-top">
		    <div class="title-big" style="width: 7%" th:text="#{iotxMgr}">
		        IOT-X节点管理
		    </div>
		    <div class="title-small">
		        >
		    </div>
		</div>
		<div class="dashboard" style="height: 1350px;padding:1.5% 2.5%">
		<div class="iotx-top">
		    <div class="iotx-top-left" id="showIotxMap">
		    </div>
		    <div class="iotx-top-right">
		        <div class="iotx-top-right-title" th:text="#{iotx.distribute}">
		            IOT-X节点分布TOP
		        </div>
		        <div class="iotx-top-right-charts" id="iotxDistributePie">

		        </div>
		        <div class="iotx-top-right-title" th:text="#{iotx.alarmData}">
		            	告警数据
		        </div>
		        <div id="alarmDatas" class="iotx-top-right-warnings" v-cloak="v-cloak">
		            <div v-for="alarm in alarms" class="warnings">
		                <div class="warnings-img">
		                    <img src="/webResources/img/iotx/warning.png"/>
		                </div>
		                <div class="iotx-name">
		                    <div class="iotx-name-detail" style="color: #757575">
		                        IOT-X:{{alarm['sensor.dust.iotx.serialNo']}}
		                    </div>
		                    <div class="iotx-name-detail" style="color: #E56A38">
		                        	{{alarm.level}}
		                    </div>
		                </div>
		                <div class="time-img">
		                    <img src="/webResources/img/iotx/times.png"/>
		                </div>
		                <div class="iotx-time">
		                    <div class="iotx-time-top">
		                        {{alarm.collectTime | yearFormat}}
		                    </div>
		                    <div class="iotx-time-down">
		                        {{alarm.collectTime | timeFormat}}
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		    <div class="iotx-bottom" >
		        <div id="iotxSearch" class="company-select" v-cloak="v-cloak">
		            <div class="company-select-title" style="width: 5%;color: #0a0a0a" th:text="#{select}">
		                	筛选：
		            </div>
		            <div class="time-select1" th:text="#{iotx.openTime}">
		                	开机时间
		            </div>
		            <div class="time-select">
		                <input class="form-control " id="beginTime" size="10" th:placeholder="#{iotx.openTime.from}" value=""/>
		            </div>
		            <div class="time-select2"  th:text="#{to}">
		                	至
		            </div>
		            <div class="time-select">
		                <input class="form-control " id="endTime" size="10" th:placeholder="#{iotx.openTime.to}" value=""/>
		            </div>
		            <div class="time-select1" style="height:110%;padding-top: 0px;width: 5%;margin-left: 1.5%">
		                <button v-on:click="empty" th:text="#{empty}" class="company-button-new" style="background:#B6B6BA;font-size:14px;height: 100%;margin-top: 0%">
		                    	清除
		                </button>
		            </div>
		            <div class="time-select1" style="height:110%;padding-top: 0px;width: 5%;margin-left: 1.5%">
		                <button id="confirm"  th:text="#{confirm}" class="company-button-new" style="font-size:14px;height: 100%;margin-top: 0%">
		                    	确认
		                </button>
		            </div>

		             <div class="company-search" style="float: right;margin-left:1%;margin-top: -1%;margin-right: 2%">
                        <div class="form-inline hidden-xs">
                            <div class="input-group input-medium">
                                <input class="form-control" v-model="searchContent" th:placeholder="#{searchContent}" type="text"/>
                                <span class="input-group-btn">
			                        <button id="search" class="btn btn-success" style="background: #D3D5DD;border: 0px"><i class="fa fa-search"></i></button>
			                    </span>
                            </div>
                        </div>
                    </div>
		        </div>
		        <div class="data-table">
	                <div class="col-lg-12">
	                    <table id="iotxTable"></table>
	                    <div id="iotxPager"></div>
	                </div>
		        </div>
		    </div>
		</div>
	</div>
</body>


</html>

